﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Grids - Label Edit</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" href="../../../css/samples.css" />
    <link rel="stylesheet" href="../../../css/integralui.css" />
    <link rel="stylesheet" href="../../../css/integralui.treegrid.css" />
    <link rel="stylesheet" href="../../../css/themes/theme-flat-blue.css" />
    <script type="text/javascript" src="../../../external/angular.min.js"></script>
    <script type="text/javascript" src="../../../js/angular.integralui.min.js"></script>
    <script type="text/javascript" src="../../../js/angular.integralui.lists.min.js"></script>
    <script type="text/javascript" src="../../../js/angular.integralui.treegrid.min.js"></script>
    <script type="text/javascript">
 		angular
			.module("appModule", ["integralui"])
			.controller("appCtrl", function($scope){
				$scope.gridName = "gridSample";
				$scope.labelEdit = true;
				$scope.editorActivation = 'click';
				$scope.globalEditorSettings = {
					activate: $scope.editorActivation
				}

				$scope.columns = [
					{ headerText: "Header1", footerText: "Footer1", width: 200 },
					{ headerText: "Header2", footerText: "Footer2", width: 250 },
					{ headerText: "Header3", footerText: "Footer3", width: 120 }
				];

				$scope.rows = [
					{ 
						id: 1,
						text: "Item1",
						cells: [{ text: "Item11" }, { text: "Item12" }, { text: "Item13" }],
						rows: [
							{ id: 11, pid: 1, text: "Item11", cells: [{ text: "Item111" }, { text: "Item112" }, { text: "Item113" }] },
							{ 
								id: 12,
								pid: 1,
								text: "Item12",
								cells: [{ text: "Item121" }, { text: "Item122" }, { text: "Item123" }],
								rows: [
									{ id: 121, pid: 12, text: "Item121", cells: [{ text: "Item1211" }, { text: "Item1212" }, { text: "Item1213" }] },
									{ 
										id: 122,
										pid: 12,
										text: "Item122", 
										cells: [{ text: "Item1221" }, { text: "Item1222" }, { text: "Item1223" }],
										expanded: false,
										rows: [
											{ id: 1221, pid: 122, text: "Item1221", cells: [{ text: "Item12211" }, { text: "Item12212" }, { text: "Item12213" }] },
											{ id: 1222, pid: 122, text: "Item1222", cells: [{ text: "Item12221" }, { text: "Item12222" }, { text: "Item12223" }] }
										]
									},
									{ id: 123, pid: 12, text: "Item123", cells: [{ text: "Item1231" }, { text: "Item1232" }, { text: "Item1233" }] },
									{ id: 124, pid: 12, text: "Item124", cells: [{ text: "Item1241" }, { text: "Item1242" }, { text: "Item1243" }] },
									{ id: 125, pid: 12, text: "Item125", cells: [{ text: "Item1251" }, { text: "Item1252" }, { text: "Item1253" }] }
								]
							},
							{ id: 13, pid: 1, text: "Item13", cells: [{ text: "Item131" }, { text: "Item132" }, { text: "Item133" }] },
							{
								id: 14,
								pid: 1,
								text: "Item14",
								cells: [{ text: "Item141" }, { text: "Item142" }, { text: "Item143" }],
								rows: [
									{ id: 141, pid: 14, text: "Item141", cells: [{ text: "Item1411" }, { text: "Item1412" }, { text: "Item1413" }] },
									{ id: 142, pid: 14, text: "Item142", cells: [{ text: "Item1421" }, { text: "Item1422" }, { text: "Item1423" }] }
								]
							}
						]
					},
					{
						id: 2,
						text: "Item2",
						cells: [{ text: "Item21" }, { text: "Item22" }, { text: "Item23" }],
						expanded: false,
						rows: [
							{ id: 21, pid: 2, text: "Item21", cells: [{ text: "Item211" }, { text: "Item212" }, { text: "Item213" }] },
							{ id: 22, pid: 2, text: "Item22", cells: [{ text: "Item221" }, { text: "Item222" }, { text: "Item223" }] },
							{
								id: 23,
								pid: 2,
								text: "Item23", 
								cells: [{ text: "Item231" }, { text: "Item232" }, { text: "Item233" }],
								expanded: false,
								rows: [
									{ id: 231, pid: 23, text: "Item231", cells: [{ text: "Item2311" }, { text: "Item2312" }, { text: "Item2313" }] },
									{ id: 232, pid: 23, text: "Item232", cells: [{ text: "Item2321" }, { text: "Item2322" }, { text: "Item2323" }] }
								]
							}
						]
					},
					{ id: 3, text: "Item3", cells: [{ text: "Item31" }, { text: "Item32" }, { text: "Item33" }] },
					{ id: 4, text: "Item4", cells: [{ text: "Item41" }, { text: "Item42" }, { text: "Item43" }] },
					{ id: 5, text: "Item5", cells: [{ text: "Item51" }, { text: "Item52" }, { text: "Item53" }] },
					{
						id: 6,
						text: "Item6",
					    cells: [{ text: "Item61" }, { text: "Item62" }, { text: "Item63" }],
						rows: [
							{ id: 61, pid: 6, text: "Item61", cells: [{ text: "Item611" }, { text: "Item612" }, { text: "Item613" }] },
							{ id: 62, pid: 6, text: "Item62", cells: [{ text: "Item621" }, { text: "Item622" }, { text: "Item623" }] }
						]
					},
					{ id: 7, text: "Item7", cells: [{ text: "Item71" }, { text: "Item72" }, { text: "Item73" }] }
				];
				
				$scope.toggleEdit = function(){
					$scope.labelEdit = !$scope.labelEdit;
				}

				$scope.$watch("editorActivation", function(newValue, oldValue){
					if (newValue != oldValue){
						$scope.globalEditorSettings = {
							activate: newValue
						}
					}
				});
			});
    </script>
    <style type="text/css">
		.control-panel
		{
			width: 170px;
		}
		.feature-content
		{
			width: 850px;
		}
        .directive
        {
        	width: 600px;
        	height: 350px;
        }
    </style>
</head>
<body>
	<div class="header">
        <div class="header-content">
		    <h1><span style="color:#c60d0d">IntegralUI</span> Studio <span style="font-size:0.75em; font-style:italic">for Web</span></h1>
        </div>
        <hr class="head-separator" />
    </div>
    <div class="content" ng-app="appModule">
        <div class="feature" ng-controller="appCtrl">
	        <h2 class="feature-title">Grids / Label Edit</h2>
	        <div class="feature-content">
                <iui-treegrid name="{{gridName}}" class="directive" columns="columns" rows="rows" label-edit="labelEdit"  editor-settings="globalEditorSettings"></iui-treegrid>
                <div class="control-panel">
					<label><input type="checkbox" ng-click="toggleEdit()" checked="checked" /> Allow Editing</label><br />
					<p class="alignBlock">Activate Editor On:</p>
					<label class="alignVal"><input type="radio" ng-model="editorActivation" value="click" />Click</label>
					<label class="alignVal"><input type="radio" ng-model="editorActivation" value="dblclick" />Double-Click</label>
                </div>
                <br style="clear:both;"/>
                <div class="feature-help">
                    <p><span class="initial-space"></span>In this sample you can enable/disable editing of cell label in each row of TreeGrid directive for AngularJS. By clicking on check box on the right, you can change the built-in properties:
                        <ul class="feature-points">
                            <li><span style="color:#c60d0d">labelEdit</span> - determines whether cell label is editable</li>
                            <li><span style="color:#c60d0d">editorSettings</span> - holds an object with global settings for all editors</li>
                        </ul>
                    </p>
                     <p>There are two ways to start editing process:
                        <ul class="feature-points">
                            <li>By clicking on cell label using the left mouse button</li>
                            <li>By pressing the 'ENTER' key when cell has the input focus</li>
                        </ul>
                    </p>
                    <p>When cell is clicked, the edit box will not appear immediately. Depending on activation type, the editor will show when:
                        <ul class="feature-points">
                            <li>cell is clicked - You need to press and hold the left-mouse button for a short amount of time and then release it, after which the edit box will appear</li>
                            <li>cell is double-clicked - teh editor will appear imediatelly</li>
                            <li>cell has input focus - the editor will appear when ENTER key is pressed, activation type doesn't matter in this case</li>
                        </ul>
                    </p>
               </div>
            </div>
        </div>
    </div>
</body>
</html>
